<template>
    <div>
        <!-- 这里不能用v-modele的原因是isShow是父组件的值 不能改变 -->
        <a-modal style="min-width: 900px; top: 5vh" class="event-modal" :footer="null" :visible="isShow"
            @cancel="cancelSend">
            <div v-if="tableEchartFlag">
                <!-- 渲染的表格 斑马纹 -->
                <a-table class="ant-table-striped" :scroll="{ x: 1000 }" size="small" :columns="fldNames"
                    :data-source="features"
                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" />
            </div>
            <!-- 把数据传递给Echarts -->
            <EventChart :features="features" v-else />
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">
                    <a-button @click="handlechangeHotMap" type="primary">查看事件热力图</a-button>
                    <a-button @click="handlechange" v-if="tableEchartFlag" type="primary" class="event-button">生成事件统计表
                    </a-button>
                    <a-button @click="handlechange" v-else type="primary" class="event-button">查看事件信息</a-button>
                </div>
            </template>
            <template #modalRender="{ originVNode }">
                <div :style="transformStyle">
                    <component :is="originVNode" />
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script setup>
import { searchEvent } from 'assets/libs/utils/searchEvent'
import { ref, computed, watch, watchEffect, reactive, onMounted, toRefs, handleError } from "vue";
/* 实现拖拽 */
import { useDraggable } from '@vueuse/core';
/* 接收组件 */
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    features: {
        type: Array,
        default: []
    },
    fldNames: {
        type: Array,
        default: []
    }

})
/* 拿到父组件的数据 */
let { isShow, features, fldNames } = toRefs(props)
/* table和eacharts的标志 */
const tableEchartFlag = ref(true)
/* 点击切换table和echarts */
const handlechange = () => {
    tableEchartFlag.value = !tableEchartFlag.value
}
const emit = defineEmits(['changeIsShow', "hotMapIsShow"])
/* 点击隐藏表单 */
function cancelSend() {
    // isShow.value = false;
    emit('changeIsShow', false)
    searchEvent.exit()
    /* 退出时恢复显示table */
    tableEchartFlag.value = true
}
/* 点击发送事件加载热力图,并关闭弹窗 */
function handlechangeHotMap() {
    emit('hotMapIsShow', true)
    cancelSend()
}
/* ------------------------------------------------ */


// const columns = ref [{
//     title: 'Name',
//     dataIndex: 'name',
// }, {
//     title: 'Age',
//     dataIndex: 'age',
// }, {
//     title: 'Address',
//     dataIndex: 'address',
// }];
// const columns = ref([])
// const data = ref([])

// const handleOk = e => {
//     console.log(fldNames.value);
//     console.log( features.value);
//     console.log("ok");
//     // visible.value = false;
//     fldNames.value.map(item => {
//         columns.value.push({
//             title: item,
//             dataIndex: item
//         })
//     })
//     features.value.map((item, index) => {
//         console.log(item.AttValue);
//         const res = item.AttValue
//         data.value.push({
//             key: index,
//             事件编号: res[0],
//             事件类型: res[1],
//             事件等级: res[2],
//             发生时间: res[3],
//             发生地点: res[4],
//             车牌号: res[5],
//             驾驶员: res[6],
//             处理状态: res[7],
//             mpLayer: res[8],
//         })
//     })
// };



/* ------------------------------------ */
const modalTitleRef = ref(null);
/* const showModal = () => {
    visible.value = true;
}; */
const {
    x,
    y,
    isDragging,
} = useDraggable(modalTitleRef);

const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
watch([x, y], () => {
    if (!startedDrag.value) {
        startX.value = x.value;
        startY.value = y.value;
        const bodyRect = document.body.getBoundingClientRect();
        const titleRect = modalTitleRef.value.getBoundingClientRect();
        dragRect.value.right = bodyRect.width - titleRect.width;
        dragRect.value.bottom = bodyRect.height - titleRect.height;
        preTransformX.value = transformX.value;
        preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
});
watch(isDragging, () => {
    if (!isDragging) {
        startedDrag.value = false;
    }
});
watchEffect(() => {
    if (startedDrag.value) {
        transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
        transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
    }
});
const transformStyle = computed(() => {
    return {
        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
});
</script>
<style scoped>
.event-button {
    background-color: #2abf5b;
    margin-left: 20px;

}

.ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
}
</style>
<style>
.ant-pagination {
    position: unset !important
}
</style>
